<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北京积木纵横后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="__SKIN__/js/layui/css/layui.css" media="all">
    <!--JS引用-->
    <script src="__SKIN__/js/jquery/jquery-3.3.1.js"></script>
    <script src="__SKIN__/js/layui/layui.all.js"></script>
    <script src="__SKIN__/js/layui/xm-select.js"></script>
    <!--CSS引用-->
</head>
<body>

<div class="layui">
    <!-- 你的HTML代码 -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>审批流列表</legend>
    </fieldset>
    <div class="layui-tab">
        <!--选项卡容器-->
        <ul class="layui-tab-title">
            <li class="layui-this">我得流程</li>
            <li class="">待办流程</li>
        </ul>
        <!--选项卡容器end-->
        <!--内容容器-->
        <!--添加新工作流弹窗-->

        <div class="layui-tab-content">
            <!--第一项-->
            <div class="layui-tab-item layui-show">
                <div id="extra">
                    <button type="button" data-method="addflow" class="layui-btn layui-btn-warm">新建流程</button>
                </div>
                <div id="edit" style="display:none">
                    <form style="width:90%;margin-left:5%;" class="layui-form layui-form-pane" lay-filter="editform" id="editform"></form>
                </div>
                <div id="time_line" class="layui-row" style="display: none">

                </div>
                <div class="demoTable" style="margin-top:1rem">
                    搜索流程ID：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="searchid" autocomplete="off">
                    </div>
                    搜索流程名：
                    <div class="layui-inline">
                        <input class="layui-input" name="name" id="searchname" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <!--审批流列表-->
                <table  lay-filter="workflow" id="workflow"></table>
                <!--审批流列表end-->
                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-xs"  lay-event="details">详情</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="process">进度</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="edit">配置</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="recall">撤回</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
            <!--第一项end-->

            <!--第二项-->
            <div class="layui-tab-item">
                <div id="examine" style="display:none">
                    <div style="width:800px">
                        <form style="width:90%;margin-left:5%;" class="layui-form layui-form-pane" lay-filter="exform" id="exform"></form>
                    </div>
                </div>
                <div class="demoTable" style="margin-top:1rem">
                    搜索流程ID：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="searchid2" autocomplete="off">
                    </div>
                    搜索流程名：
                    <div class="layui-inline">
                        <input class="layui-input" name="name" id="searchname2" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload2">搜索</button>
                </div>
                <!--站点列表-->
                <table class="layui-hide" lay-filter="workflow2" id="workflow2"></table>
                <!--站点列表end-->
                <!--审核操作菜单-->
                <script type="text/html" id="bar2">
                    <a class="layui-btn layui-btn-xs"  lay-event="examine">审核</a>
                </script>
                <!--审核操作菜单end-->
                <!--下载操作菜单-->
                <script type="text/html" id="down">
                    <a class="layui-btn layui-btn-xs"  lay-event="down">下载</a>
                </script>
                <script type="text/html" id="downs">
                    <a class="layui-btn layui-btn-xs"  lay-event="down">下载</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="del">删除</a>
                </script>
                <!--下载操作菜单end-->
            </div>
            <!--第二项end-->
        </div>
        <!--内容容器end-->
    </div>
</div>
<script src="__SKIN__/workflow/js/form_assembly.js" charset="utf-8"></script>
<script>
    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(e){
                arr = eval('(' + e + ')');
            }
        });
        return arr;
    }
    layui.use(['table','form','layer','upload','element'], function() {
        var table = layui.table;

        /********************************初始化表格 --自发起********************************/
        table.render({
            elem: '#workflow'
            , url: "{:url('Workflowajax/get_workflow_list')}?type=1"
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , autoSort: true
            , cols: [[
                {type: 'checkbox', width: '2.8%'}
                , {field: 'id', title: 'ID', width: '4.7%', sort: true}
                , {field: 'name', title: '流程名称', width: '5.5%'}
                , {field: 'sponsor', title: '发起人', width: '4.7%'}
                , {field: 'create_time', title: '创建时间', width: '10%'}
                , {field: 'flow_id', title: '流程模版ID', width: '7.2%'}
                , {field: 'process_name', title: '下一审核节点', width: '7.9%'}
                , {field: 'peoples', title: '下一节点审核人', width: '31%', align: 'center'}
                , {
                    field: 'con_sign', title: '是否会审', width: '5.2%', templet: function (e) {
                        if (e.con_sign == 3) {
                            return '<span style="color: #0339fd;">是</span>';
                        } else {
                            return '<span style="color: #03ff06;">否</span>';
                        }
                    }
                }
                , {
                    field: 'audit_status', title: '审核状态', width: '5.2%', templet: function (e) {
                        if (e.audit_status == 1) {
                            return '<span style="color: #fdd303;">审核中</span>';
                        } else if (e.audit_status == 2) {
                            return '<span style="color: #03ff06;">已通过</span>';
                        } else if (e.audit_status == 3) {
                            return '<span style="color: #493131;">被打回</span>';
                        } else if (e.audit_status == 4) {
                            return '<span style="color: rgba(33,32,26,0.94);">已撤回</span>';
                        }
                    }
                }//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {fixed: 'right', toolbar: '#bar', width: '15%'}
            ]]
            , page: true
            ,limit: 5
            ,limits:[5,10,15,20,25]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }, //头工具栏事件
        });
        /*******************************初始化表格  -- 待审核******************************/
        table.render({
            elem: '#workflow2'
            , url: "{:url('Workflowajax/get_workflow_list')}?type=2"
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , toolbar: '#toolbar2' //开启头部工具栏，并为其绑定左侧模板
            , cols: [[
                {type: 'checkbox', width: '2.8%'}
                , {field: 'id', title: 'ID', width: '4.7%', sort: true}
                , {field: 'name', title: '流程名称', width: '5.5%'}
                , {field: 'sponsor', title: '发起人', width: '4.7%'}
                , {field: 'create_time', title: '创建时间', width: '10%', sort: true}
                , {field: 'flow_id', title: '流程模版ID', width: '7.2%', sort: true}
                , {field: 'process_name', title: '下一审核节点', width: '7.9%', sort: true}
                , {field: 'peoples', title: '下一节点审核人', width: '31%', align: 'center', sort: true}
                , {
                    field: 'con_sign', title: '是否会审', width: '5.2%', templet: function (e) {
                        if (e.con_sign == 3) {
                            return '<span style="color: #0339fd;">是</span>';
                        } else {
                            return '<span style="color: #03ff06;">否</span>';
                        }
                    }
                }
                , {
                    field: 'audit_status', title: '审核状态', width: '5.2%', templet: function (e) {
                        if (e.audit_status == 1) {
                            return '<span style="color: #fdd303;">审核中</span>';
                        } else if (e.audit_status == 2) {
                            return '<span style="color: #03ff06;">已通过</span>';
                        } else if (e.audit_status == 3) {
                            return '<span style="color: #ff0101;">被打回</span>';
                        }
                    }
                }//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {fixed: 'right', toolbar: '#bar2', width: '15%'}
            ]]
            , id: 'workflow2'  //重载ID
            , page: true
            ,limit: 5
            ,limits:[5,10,15,20,25]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
        });
        /**********************************表格重载(查询)************************************/
        var actives = {
            reload: function () {
                var searchid = $('#searchid');
                var searchname = $('#searchname');
                //执行重载
                table.reload('workflow', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: searchid.val(),
                            name: searchname.val(),
                        }
                    }
                }, 'data');
            },
            reload2: function(){
                var searchid2 = $('#searchid2');
                var searchname2 = $('#searchname2');

                //执行重载
                table.reload('workflow2', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: searchid2.val(),
                            name: searchname2.val(),
                        }
                    }
                }, 'data');
            }
        };
        /********************************监听行工具事件（自发起）************************************/
        table.on('tool(workflow)', function (obj) {
            var data = obj.data;

            //查询当前流程状态，审批开始以后必须撤回才能编辑，
            let cherk_url = "{:url('Workflowajax/check_flow')}";
            $res = ajax(cherk_url, data);

            if (obj.event === 'del' && ($res.msg == 3 || $res.msg == 4)) {
                layer.confirm('真的删除记录么？', function (index) {
                    let url = "{:url('Workflowajax/delete_workflow')}";
                    let res = ajax(url, data);
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        obj.del();
                        table.reload('workflow');
                    } else if (res.code == 0) {
                        layer.msg(res.msg);
                    }
                });
            } else if (obj.event === 'edit' && ($res.msg == 3 || $res.msg == 4)) {
                //根据表单是否外接判断打开页面
                if (data.is_form_extend === 1) {
                    active.urlform(data)
                } else {
                    active.editform(data);
                }
            } else if (obj.event === 'recall' && $res.msg == 1) { //撤回
                let url = "{:url('Workflowajax/recall_work_flow')}";
                let res = ajax(url, data);
                if (res.code == 1) {
                    layer.msg(res.msg);
                    table.reload('workflow');
                } else if (res.code == 0) {
                    layer.msg(res.msg);
                }
            } else if (obj.event === 'process') { //进程--时间轴
                // alert(data.id);
                active.settimeline(data);
            } else if (obj.event === 'details') { //详情页
                active.details(data);
            }
            ;
        });
        /*******************************监听行工具事件（待处理）*********************************/
        table.on('tool(workflow2)', function (obj) {
            var data = obj.data;
            if (obj.event === 'examine') {
                active.examine(data);
            }
        });
        //弹窗表单
        var active = {
                urlform: function (data) {
                    //获取链接参数
                    top.table_id = data.form_extend;
                    var urls = '../' + data.edit + '?id=' + data.form_extend;
                    top.type = 'edit';
                    _this = layer.open({
                        type: 2//此处以iframe举例
                        , title: '修改审批流'
                        , area: 'auto'
                        , shade: 0
                        , maxmin: true
                        , offset: 'auto'
                        , content: urls
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            form_extend = top.form_extend;
                            if (form_extend == '' || form_extend == undefined || form_extend == null) {
                            } else {
                                let edit_url = "{:url('Workflowajax/edit_workflow')}";
                                let res = ajax(edit_url, {'workflow_id': data.id});
                            }
                            top.form_extend = '';
                            table.reload('workflow');
                            return false;
                        }
                    });
                    layer.full(_this); //窗口直接顶天立地
                },
                addflow: function () {
                    var that = this;
                    top.type = 'add';
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2//此处以iframe举例
                        , title: '添加流程'
                        , area: ['800px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        , content: "{:url('workflowrovalstart/add_workflow')}"
                        , btn: ['关闭']
                        , success: function (layero, index) {

                        }
                        , btn1: function (index, layero) {
                            layer.close(index);
                            table.reload('workflow');
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            table.reload('workflow');
                        }
                    });
                },
                editform: function (e) {
                    var that = this;
                    top.workflow = e;
                    top.type = 'edit';
                    layer.open({
                        type: 2//此处以iframe举例
                        , title: '修改审批流'
                        , area: ['800px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        // ,content: $("#edit")
                        , content: "{:url('workflowrovalstart/edit_workflow')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            table.reload('workflow');
                        }
                    });
                },
                examine: function (e) {
                    var that = this;
                    top.workflow = e;
                    top.type = 'examine';
                    _aaa = layer.open({
                        type: 2//此处以iframe举例
                        , title: '审核流程'
                        , area: ['817px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        // ,content: $("#examine")
                        , content: "{:url('workflowrovalstart/examine_workflow')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {

                            table.reload('workflow2');
                        }
                    });
                    layer.full(_aaa); //窗口直接顶天立地
                },
                details: function (e) {
                    var that = this;
                    top.workflow = e;
                    top.type = 'details';
                    _aaa = layer.open({
                        type: 2//此处以iframe举例
                        , title: '审批流详情'
                        , area: ['817px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        , content: "{:url('workflowrovalstart/details_workflow')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            table.reload('workflow');
                        }
                    });
                    layer.full(_aaa); //窗口直接顶天立地
                },
                settimeline: function (e) {
                    top.workflow = e;
                    layer.open({
                        type: 2//此处以iframe举例
                        , title: '流程时间轴'
                        , area: ['1024px', '800px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        // ,content: $("#time_line")
                        , content: "{:url('workflowrovalstart/process')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        }
                    });
                },
            };
        //弹窗表单按钮控制器
        $('#extra .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    })
    /**************************layui实例化结束*************************/
</script>

